<template>
  <div class="buy-container">
    <div class="title">我买到的</div>

    <div class="buy-box" >
      <div class="buy-v1">
        <ul>
          <li
            v-for="(item, index) in buyV1List"
            :key="index"
            @click="toType(index)"
            :class="{ active: buyV1Index == index }"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="detai-box" v-show="isNull">
        <el-empty description="暂无数据"></el-empty>
      </div>
      <div class="buy-v2" v-show="!isNull">
        <div class="text-gary-500" v-show="getOderListlength">
          当前你没有新的订单
        </div>
        <ul class="orders-ul" v-show="!getOderListlength">
          <li v-for="(item, index) in getOrderList" :key="index">
            <div class="top">
              <div class="time">订单号：{{ item.orderId }}</div>
              <div class="numbering">{{ item.orderTime.split('T')[0] +" " +item.orderTime.split('T')[1] }}</div>
            </div>
            <div class="goods">
              <div class="img">
                <el-image
                  :src="
                    item.url == null
                      ? 'https://imgbed.link/file/15729'
                      : item.url
                  "
                  :fit="'cover'"
                >
                </el-image>
                <div class="info">
                  <div class="goods-num">
                    <span class="name">{{ item.name }}</span>
                    <span class="num text-gray-400 text-xs"
                      >编号#{{ item.orderNumbering }}</span
                    >
                  </div>
                  <div class="author">卖家：{{ item.orderSeller }}</div>
                </div>
              </div>

              <div class="price-container">
                <span class="price">￥{{ item.orderMoney }}</span>
                <span class="type">{{ item.orderPayment }}</span>
              </div>
              <div class="state">
                <span>{{ orderState(item.orderState) }}</span>
              </div>
              <div class="check">
                <button @click="toInfo(item)">查看详情</button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      isNull: true,
      buyV1List: ["已付款", "已取消", "全部"],
      buyV1Index: 0,
      ordersImg: [{ url: require("@/image/swiper-01.jpg") }],
      List: [
        {
          id: "1",
          name: "宇宙",
          author: "name",
          num: 3,
          price: 2020,
          state: 0,
        },
        {
          id: "2",
          name: "宇宙",
          author: "name",
          num: 3,
          price: 2020,
          state: 1,
        },
        {
          id: "3",
          name: "宇宙",
          author: "name",
          num: 3,
          price: 2020,
          state: 2,
        },
        {
          id: "4",
          name: "宇宙",
          author: "name",
          num: 3,
          price: 2020,
          state: 0,
        },
      ],
      getOrderList: [
        {
          orderId: null,
          orderItem: null,
          orderNumbering: null,
          name: null,
          url: null,
          author: null,
          orderNumbering: null,
          orderSeller: null,
          orderBuyer: null,
          orderPayer: null,
          orderPayment: null,
          orderMoney: null,
          orderTime: null,
          orderState: null,
        },
      ],
      getOderListlength: false,
    };
  },
  methods: {
    //筛选订单
    toType(index) {
      this.buyV1Index = index;
      console.log(this.buyV1Index);
      this.getOrderLIst();
    },
    //获取订单
    getOrderLIst() {
      let token = this.$cookies.get("token");
      this.$taxios.postInfo("/queryBuyOrder", { toekn: token }).then((res) => {
        console.log(res);
        let getOrder = res.order;
        this.listArr = [];
        for (let i = 0; i < getOrder.length; i++) {
          // console.log(items[i])
          this.listArr.push(getOrder[i]);
        }
        console.log(this.listArr);
        if (this.buyV1List[this.buyV1Index] == "全部") {
          this.getOrderList = this.listArr.slice(0);
        } else {
          this.getOrderList = this.listArr.filter((item) => {
            return item.orderState == this.buyV1Index;
          });
        }
        this.getOderListlength = this.getOrderList.length <= 0 ? true : false;
        if(this.getOrderList.length>0){
            this.isNull=false
        }
      });
    },
    //跳转详情
    toInfo(value) {
      console.log(value);
      this.$router.push({
        path: "/item",
        query: { group: value.orderItem, numbering: value.orderNumbering },
      });
    },
  },

  computed: {
    orderState() {
      return function (val) {
        if (val == 1) {
          return "已取消";
        } else {
          return "已完成";
        }
      };
    },
  },
  created() {
    this.toType(this.buyV1Index);
  },
};
</script>
<style  lang="less" scoped>
.buy-container {
  width: 100%;
  max-width: 1200px;
  padding-left: 30px;

  .title {
    height: 60px;
    background: #fff;
    line-height: 60px;
    text-align: left;
    padding-left: 20px;
    box-shadow: 0 2px 16px 0 hsl(0deg 0% 71% / 40%);
    @apply rounded-lg;
  }

  .buy-box {
    background: #fff;
    margin-top: 1rem;
    @apply rounded-lg;
    padding: 1rem;
    box-shadow: 0 2px 16px 0 hsl(0deg 0% 71% / 40%);

    span {
      text-indent: 0%;
    }

    .buy-v1 {
      margin-top: 40px;
      width: 100%;
      border-bottom: 1px solid rgba(128, 128, 128, 0.501);

      ul {
        display: flex;
        height: 40px;
        align-items: center;

        li {
          list-style: none;
          color: rgba(128, 128, 128, 0.511);
          width: 70px;
          font-size: 14px;
          border-right: 1.5px solid rgba(128, 128, 128, 0.5);
          cursor: pointer;
        }

        li.active {
          color: rgb(72, 70, 70);
        }
      }
    }

    .buy-v2 {
      margin-top: 40px;
      width: 100%;

      .orders-ul {
        position: relative;
        width: 100%;
        margin-bottom: 40px;

        li {
          margin-top: 40px;
          list-style: none;
          border: 1px solid rgba(128, 128, 128, 0.5);
        }

        .top {
          display: flex;
          height: 40px;
          background: rgba(128, 128, 128, 0.1);
          justify-content: space-between;

          .time {
            padding: 0 20px;
            line-height: 40px;
          }

          .numbering {
            padding: 0 20px;
            line-height: 40px;
          }
        }

        .goods {
          position: relative;
          width: 100%;
          display: flex;
          align-items: center;

          div {
            height: 150px;
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
          }

          .img {
            // display: block;
            flex: 2;
            // height: 100%;
            align-items: center;
            // padding: 20px;
            border-top: 1px solid rgba(128, 128, 128, 0.3);
            border-right: 1px solid rgba(128, 128, 128, 0.3);

            .el-image {
              padding: 20px;
              flex: none;
              width: 100px;
              height: 100px;

              /deep/ .el-image__inner {
                border: 0.1px rgb(48, 46, 46) solid;
              }
            }

            .info {
              flex-direction: column;
              height: calc(100% - 40px);

              align-items: flex-start;

              .goods-num {
                flex: 0;
                width: 90%;
                font-size: 18px;
                padding: 10px 0;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;

                .name {
                  // display: block;
                  // width: 100%;
                  text-align: left;
                  padding-right: 5px;
                  box-sizing: border-box;
                }
              }

              .author {
                flex: 0;
                font-size: 14px;
                color: rgba(128, 128, 128, 0.8);
                border: 1px solid rgba(128, 128, 128, 0.3);
                padding: 4px;
              }
            }
          }

          .price-container {
            flex-direction: column;
            justify-content: center;
            // padding: 20px;
            border-top: 1px solid rgba(128, 128, 128, 0.3);
            border-right: 1px solid rgba(128, 128, 128, 0.3);

            .price {
              font-weight: 700;
              color: #2469e5;
              padding: 5px 0;
              box-sizing: border-box;
              border-bottom: 1px solid rgba(128, 128, 128, 0.5);
            }

            .type {
              font-size: 10px;
            }
          }

          .state {
            // padding: 20px;
            justify-content: center;
            border-top: 1px solid rgba(128, 128, 128, 0.3);
            border-right: 1px solid rgba(128, 128, 128, 0.3);
          }

          .check {
            // padding: 20px;
            justify-content: center;

            border-top: 1px solid rgba(128, 128, 128, 0.3);

            button {
              width: 100px;
              padding: 0.5rem;
              border: none;
              background: #2469e5;
              color: #fff;
              cursor: pointer;
              @apply rounded-lg;
            }
          }
        }
      }
    }

    .buy-page {
      width: 100%;

      /deep/ .el-pager li {
        background: transparent;
      }

      /deep/ .el-pagination button:disabled {
        background: transparent;
      }

      /deep/ .el-pagination .btn-next {
        background: transparent;
      }
    }
  }
}
</style>
